// 初始化左侧滚动
mui('.lt_cateLeft').scroll();
// 初始化右侧滚动
var scrollRight = mui('.lt_cateRight').scroll();
//先引用zepto

$(function(){
	//去后台拿数据，需要接口
	getFirstCategoryData(function(res){
		// alert(111);
		console.log(res,'一级分类数据');
		//拿到数据后渲染,渲染时使用模板
		$('.lt_cateLeft').find('ul').html(template('first',res));
		//根据一级分类的id去请求渲染二级分类
		//获取一级分类的id
		var id = res.rows[0].id
		secondCategoryGetData({id:id},function(res){
			console.log(res,'二级分类数据');
			$('.lt_cateRight').find('ul').html(template('second',res));
		})
	})

	//给每一个一级分类的LI添加点击事件，并使相应的二级分类显示
	//需要用到事件委托，tap事件比起click在移动端更优
	$('.lt_cateLeft').find('ul').on('tap','li',function(){
		//解决一个小Bug,每次点击的时候必须从顶部0开始
		scrollRight.scrollTo(0,0,100)

		// console.log($(this));
		//获取li中data-id 的属性方法：
		//var index = $(this).data('id')                // jq的data方法获取
		// var index = $(this).attr('data-id')           // jq的attr方法获取
		// var index = $(this)[0].dataset.id             // H5获取data属性
		//var index = $(this)[0].getAttribute('data-id') //$(this)[0] --从Jq对象转化为Dom对象
		var id = $(this).data('id')
		secondCategoryGetData({id:id},function(data){
			$('.lt_cateRight').find('ul').html(template('second',data))
		})
		//每次当年点击的时候还得使左侧一级分类当前li添加now的class类名
		$(this).addClass('now').siblings().removeClass('now');
	})	

});

var getFirstCategoryData = function(callback){
	$.ajax({
		type:'get',
		url:'/category/queryTopCategory',
		async:true,
		data:{},
		success:function(data){
			callback && callback(data);
		}

	})
}
//获取二级分类的数据
var secondCategoryGetData = function(id,callback){
	$.ajax({
		type:'get',
		url:'/category/querySecondCategory',
		async:true,
		data:id,
		success:function(data){
			callback && callback(data)
		}

	})
}